<template>
  <div class="graduate page">
    <div class="tab-area">
      <div class="header-actions">
        <div class="tabs-wrapper">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="创建时间" name="0"></el-tab-pane>
            <el-tab-pane label="名称查询" name="9"></el-tab-pane>
            <el-tab-pane label="热门" name="1"></el-tab-pane>
            <el-tab-pane label="最多点赞" name="2"></el-tab-pane>
            <el-tab-pane label="最多收藏" name="3"></el-tab-pane>
            <el-tab-pane label="最多转发" name="4"></el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 将列表内容移到标签页外部 -->
      <div class="content-list">
        <!-- 列表内容 -->
        <div class="activity-list">
      <el-card 
        v-for="item in activityList" 
        :key="item.id"
        class="activity-item"
        shadow="hover"
        :class="{
          'time-sort': activeTab === '0',
          'hot-sort': activeTab === '1',
          'like-sort': activeTab === '2',
          'collect-sort': activeTab === '3',
          'forward-sort': activeTab === '4',
          'search-sort': activeTab === '9'
        }"
      >
        <!-- 报名/投票图标 -->
        <div class="action-badges">
          <div class="badge-item" 
            v-if="item.needRegistration"
            :class="{ 'is-active': item.registrationStatus === '1' }"
            @click.stop="handleRegister(item)"
          >
            <img 
              :src="require(`@/assets/img/${item.registrationStatus == '1' ? 'registration1' : 'registration'}.png`)" 
              class="icon-img-bigger" 
              alt="报名"
            >
          </div>
          <div class="badge-item" 
            v-if="item.needVote"
            :class="{ 'is-active': item.voteStatus === '1' }"
            @click.stop="handleVote(item)"
          >
            <img 
              :src="require(`@/assets/img/${item.voteStatus == '1' ? 'vote1' : 'vote'}.png`)" 
              class="icon-img-bigger" 
              alt="投票"
            >
          </div>
        </div>

        <div class="item-content">
          <div class="main-info" @click="goToDetail(item)">
            <h3 class="title">{{ item.title }}</h3>
            <div class="brief">{{ item.briefDescription }}</div>
            <div class="details">
              <span class="time">
                <i class="el-icon-time"></i>
                {{ formatDate(item.activityTime) }}
              </span>
              <span class="location">
                <i class="el-icon-location"></i>
                {{ item.location.length > 2 ? item.location.substring(0, 2) + '...' : item.location }}
              </span>
              <span class="publisher">
                <i class="el-icon-user"></i>
                {{ item.publisherName }}
              </span>
            </div>
          </div>
          <div class="item-info">
            <div class="info-item">
              <i class="el-icon-hot-water"></i>
              <span>{{ item.heatValue }}</span>
            </div>
            <div class="info-item" 
                 :class="{ 'is-active': item.likeStatus === '1' }">
              <img :src="require(`@/assets/img/${item.likeStatus === '1' ? 'good1' : 'good'}.png`)" 
                   class="icon-img" 
                   alt="点赞">
              <span>{{ item.likeCount }}</span>
            </div>
            <div class="info-item" 
                 :class="{ 'is-active': item.collectionStatus === '1' }">
              <img :src="require(`@/assets/img/${item.collectionStatus === '1' ? 'collection1' : 'collection'}.png`)" 
                   class="icon-img" 
                   alt="收藏">
              <span>{{ item.collectionCount }}</span>
            </div>
            <div class="info-item">
              <i class="el-icon-share"></i>
              <span>{{ item.forwardCount }}</span>
            </div>
            <div class="info-item report-btn" @click.stop="handleReport(item)">
              <img src="@/assets/img/report.png" alt="举报" class="icon-img" />
            </div>
          </div>
          <div class="activity-tags">
            <el-tag 
              v-for="tag in item.tags" 
              :key="tag"
              size="small"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </el-card>

      <!-- 分页器 -->
      <div class="load-more" v-if="activityList.length > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>

      <!-- 空状态 -->
      <el-empty
        v-if="activityList.length === 0"
        description="暂无活动"
      ></el-empty>
      </div>
    </div>

    <!-- 添加悬浮按钮 -->
    <div class="floating-button">
      <el-button 
        type="primary" 
        icon="el-icon-plus"
        round
        size="medium"
        @click="goToCreate"
      >发起活动</el-button>
    </div>

    <!-- 举报弹框 -->
    <el-dialog
      title="举报活动"
      :visible.sync="reportVisible"
      width="90%"
      :show-close="false"
      custom-class="report-dialog"
    >
      <el-form>
        <el-form-item>
          <el-input
            type="textarea"
            v-model="reportContent"
            :rows="4"
            :maxlength="200"
            placeholder="请输入举报原因..."
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reportVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitReport" :loading="submitting">
          提 交
        </el-button>
      </div>
    </el-dialog>

    <!-- 搜索弹窗 -->
    <el-dialog
      title="活动名称查询"
      :visible.sync="searchDialogVisible"
      width="90%"
      custom-class="search-dialog"
      :close-on-click-modal="false"
      :show-close="true"
    >
      <el-form :model="searchForm" ref="searchForm" :rules="searchRules">
        <el-form-item prop="keyword">
          <el-input
            v-model="searchForm.keyword"
            placeholder="请输入活动名称关键字"
            clearable
            prefix-icon="el-icon-search"
            class="search-input"
          >
            <template slot="append">
              <el-button 
                type="primary"
                @click="handleSearch"
                :loading="loading"
              >
                查询
              </el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import { getAlumniActivityFormList, activityHandleLike, activityHandleCollection } from "@/api/api";

export default {
  name: "Graduate",
  data() {
    return {
      activeTab: '0',  // 默认选中时间排序
      activityList: [],
      loading: false,
      total: 0,
      currentPage: 1,
      pageSize: 5,
      loadingText: '加载中...',
      reportVisible: false,
      reportContent: '',
      submitting: false,
      currentActivity: null,
      searchDialogVisible: false,
      searchForm: {
        keyword: ''
      },
      searchRules: {
        keyword: [
          { required: true, message: '请输入查询关键字', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    formatDate(date) {
      return this.$options.filters.dateFormat(date, 'yyyy-MM-dd HH:mm')
    },
    handlePageChange(page) {
      this.loadData()
    },
    handleTabClick() {
      this.currentPage = 1  // 切换标签时重置页码
      this.loadData()
    },
    async loadData() {
      try {
        this.loading = true
        const params = {
          sortType: this.activeTab,
          pageNum: this.currentPage.toString(),
          pageSize: this.pageSize.toString()
        }

        // 如果是名称查询，添加title参数
        if (this.activeTab === '9' && this.searchForm.keyword) {
          params.title = this.searchForm.keyword;
        }

        const res = await getAlumniActivityFormList(params)
        
        if (res.success) {
          this.activityList = res.data.records
          this.total = res.data.total
        }
      } catch (error) {
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    async handleLike(item) {
      console.log(item)
      try {
        const params = {
          id: item.id
        }
        const res = await activityHandleLike(params)
        
        if (res.success) {
          // 更新点赞状态
          item.likeStatus = item.likeStatus === '1' ? '0' : '1'
          // 更新点赞数量
          item.likeCount = item.likeStatus === '1' 
            ? Number(item.likeCount) + 1 
            : Number(item.likeCount) - 1
            
          this.$message({
            type: 'success',
            message: item.likeStatus === '1' ? '点赞成功' : '取消点赞成功'
          })
        }
      } catch (error) {
        console.error('点赞操作失败:', error)
        this.$message.error('操作失败，请稍后重试')
      }
    },
    async handleCollect(item) {
      try {
        const params = {
          id: item.id
        }
        const res = await activityHandleCollection(params)
        
        if (res.success) {
          // 更新收藏状态
          item.collectionStatus = item.collectionStatus === '1' ? '0' : '1'
          // 更新收藏数量
          item.collectionCount = item.collectionStatus === '1' 
            ? Number(item.collectionCount) + 1 
            : Number(item.collectionCount) - 1
            
          this.$message({
            type: 'success',
            message: item.collectionStatus === '1' ? '收藏成功' : '取消收藏成功'
          })
        }
      } catch (error) {
        console.error('收藏操作失败:', error)
        this.$message.error('操作失败，请稍后重试')
      }
    },
    handleRegister(item) {
      // 处理报名逻辑
    },
    handleVote(item) {
      // 处理投票逻辑
    },
    goToDetail(item) {
      this.$router.push({
        path: '/activity/details',
        query: {
          id: item.id
        }
      })
    },
    goToCreate() {
      this.$router.push('/activity/create');
    },
    handleReport(item) {
      this.currentActivity = item;
      this.reportVisible = true;
      this.reportContent = '';
    },
    async submitReport() {
      if (!this.reportContent.trim()) {
        this.$message.warning('请输入举报原因');
        return;
      }
      
      try {
        this.submitting = true;
        // 模拟提交延迟
        setTimeout(() => {
          this.reportVisible = false;
          this.$message({
            type: 'success',
            message: '举报已提交，我们会尽快处理',
            duration: 3000
          });
        }, 500);
      } catch (error) {
        this.$message.error('提交失败，请稍后重试');
      } finally {
        this.submitting = false;
      }
    },
    async handleSearch() {
      try {
        await this.$refs.searchForm.validate();
        this.currentPage = 1; // 重置页码
        await this.loadData();
        this.searchDialogVisible = false;
      } catch (error) {
        // 表单验证失败
        return;
      }
    }
  },
  watch: {
    activeTab(newVal) {
      this.currentPage = 1;
      if (newVal === '9') {
        this.searchDialogVisible = true;
      } else {
        this.loadData();
      }
    }
  },
  filters: {
    dateFormat(time, format) {
      let date = new Date(time);
      
      const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'H+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        'S': date.getMilliseconds()
      }
      
      if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      
      for (let k in o) {
        if (new RegExp('(' + k + ')').test(format)) {
          format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      
      return format
    }
  }
}
</script>

<style lang="less" scoped>
.graduate {
  min-height: 100vh;
  background: linear-gradient(180deg, rgba(103, 194, 58, 0.1) 0%, rgba(103, 194, 58, 0.05) 50%, rgba(255, 255, 255, 0.8) 100%);

  .activity-list {
    padding: 16px;
    position: relative;
    min-height: 200px;

    .activity-item {
      margin-bottom: 20px;
      border-radius: 8px;
      transition: all 0.3s ease;
      border: none;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(188, 152, 106, 0.2);
      position: relative;

      &.time-sort {
        /deep/ .el-card__body {
          background: rgba(188, 152, 106, 0.15);
        }
      }
      
      &.hot-sort {
        /deep/ .el-card__body {
          background: rgba(183, 147, 101, 0.15);
        }
      }
      
      &.like-sort {
        /deep/ .el-card__body {
          background: rgba(178, 142, 96, 0.15);
        }
      }
      
      &.collect-sort {
        /deep/ .el-card__body {
          background: rgba(173, 137, 91, 0.15);
        }
      }
      
      &.forward-sort {
        /deep/ .el-card__body {
          background: rgba(168, 132, 86, 0.15);
        }
      }
      
      &.search-sort {
        /deep/ .el-card__body {
          background: rgba(163, 127, 81, 0.15);
        }
      }

      &:hover {
        transform: translateY(-2px);
      }

      .action-badges {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 2;
        display: flex;
        gap: 10px;
        
        .badge-item {
          cursor: pointer;
          padding: 5px;
          border-radius: 4px;
          transition: all 0.3s ease;
          background: rgba(255, 255, 255, 0.9);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          }
          
          &.is-active {
            background: rgba(188, 152, 106, 0.15);
          }
          
          .icon-img-bigger {
            width: 25px;
            height: 25px;
            object-fit: contain;
          }
        }
      }

      .item-content {
        .main-info {
          cursor: pointer;
          
          &:hover {
            background: linear-gradient(90deg, #67C23A, #85ce61);
            -webkit-background-clip: text;
            color: transparent;
          }

          .title {
            font-size: 18px;
            font-weight: 500;
            color: #333;
            margin: 0 0 12px 0;
            transition: all 0.3s ease;
          }

          .brief {
            color: #666;
            font-size: 14px;
            margin-bottom: 15px;
            line-height: 1.6;
          }

          .details {
            display: flex;
            gap: 16px;
            color: #999;
            font-size: 13px;
            background: rgba(188, 152, 106, 0.12);
            padding: 10px 15px;
            border-radius: 6px;

            span {
              display: flex;
              align-items: center;
              gap: 6px;
              
              i {
                font-size: 14px;
                color: #909399;
              }
            }
          }
        }

        .item-info {
          display: flex;
          gap: 16px;
          margin-top: 15px;
          padding-top: 15px;
          border-top: 1px dashed #e8e8e8;

          .info-item {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 4px;
            transition: all 0.3s ease;
            color: #606266;

            &:hover {
              background-color: rgba(188, 152, 106, 0.2);
              color: #67C23A;
            }

            &.is-active {
              color: #67C23A;
              background-color: rgba(188, 152, 106, 0.2);
            }
            
            .icon-img {
              width: 16px;
              height: 16px;
              object-fit: contain;
              transition: all 0.3s ease;
            }

            .icon-img-bigger {
              width: 25px;
              height: 25px;
              object-fit: contain;
              transition: all 0.3s ease;
            }

            span {
              font-size: 13px;
            }
          }

          .action-buttons {
            margin-left: auto;
            display: flex;
            gap: 12px;
          }
        }
      }

      .activity-tags {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
      }
    }

    .load-more {
      text-align: center;
      margin-top: 30px;
      padding: 10px 0;
    }
  }

  .tab-area {
    background: rgba(188, 152, 106, 0.15);
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(188, 152, 106, 0.2);
    overflow: hidden;

    .header-actions {
      .tabs-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        
        &::-webkit-scrollbar {
          display: none;
        }
        -ms-overflow-style: none;
        scrollbar-width: none;

        :deep(.el-tabs) {
          .el-tabs__nav-wrap {
            &::after {
              height: 1px;
              background-color: #e8e8e8;
            }
          }

          .el-tabs__header {
            margin: 0;
          }

          .el-tabs__nav {
            white-space: nowrap;
            float: none;
          }

          .el-tabs__item {
            font-size: 14px;
            
            &.is-active {
              color: #67C23A;
            }
          }
        }
      }
    }
  }
  
  .content-list {
    margin-top: 20px;
    min-height: 200px;
  }

  // 修改悬浮按钮样式
  .floating-button {
    position: fixed;
    right: 20px;
    bottom: 80px; // 调整到底部导航栏上方
    z-index: 1000;

    .el-button {
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      padding: 12px 24px;
      
      &:hover {
        transform: translateY(-2px);
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);
      }
    }
  }
}

// 分页器样式优化
:deep(.el-pagination.is-background) {
  .el-pager li:not(.disabled).active {
    background-color: #67C23A;
  }
  .el-pager li:not(.disabled):hover {
    color: #67C23A;
  }
}

.item-info {
  .info-item {
    &.is-active {
      color: #67C23A;
    }
    
    .icon-img {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }
  }

  .registration-status, .vote-status {
    display: flex;
    align-items: center;
    
    &.is-registered, &.is-voted {
      color: #67C23A;
    }

    .icon-img {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }
  }

  .report-btn {
    margin-left: auto;
    
    &:hover {
      color: #F56C6C;
      background-color: rgba(245, 108, 108, 0.1);
    }
  }
}

// 适配移动端
@media screen and (max-width: 768px) {
  .graduate {
    .activity-list {
      .activity-item {
        margin-bottom: 15px;
        
        /deep/ .el-card__body {
          padding: 15px;
        }
        
        .item-content {
          .main-info {
            .title {
              font-size: 16px;
            }
            
            .brief {
              font-size: 13px;
            }
            
            .details {
              flex-wrap: wrap;
              padding: 8px 12px;
            }
          }
          
          .item-info {
            gap: 12px;
            
            .info-item {
              padding: 4px 8px;
            }
          }
        }

        .action-badges {
          top: 10px;
          right: 10px;
          gap: 8px;
          
          .badge-item {
            padding: 4px;
            
            .icon-img-bigger {
              width: 20px;
              height: 20px;
            }
          }
        }
      }
    }
  }
}

.report-dialog {
  /deep/ .el-dialog__body {
    padding: 20px;
  }
  
  /deep/ .el-textarea__inner {
    background: #f7fafd;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 14px;
    
    &::placeholder {
      color: #999;
    }
  }
  
  .dialog-footer {
    text-align: center;
    padding-top: 10px;
  }
}

@media screen and (max-width: 768px) {
  .report-dialog {
    /deep/ .el-dialog {
      width: 90% !important;
      margin-top: 20vh !important;
    }
  }
}

.search-dialog {
  /deep/ .el-dialog {
    border-radius: 12px;
    overflow: hidden;
    background: rgba(188, 152, 106, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px 0 rgba(188, 152, 106, 0.2);
    
    .el-dialog__header {
      padding: 20px;
      background: rgba(188, 152, 106, 0.2);
      margin-right: 0;
      border-bottom: 1px solid rgba(188, 152, 106, 0.2);
      
      .el-dialog__title {
        font-size: 16px;
        font-weight: 500;
        color: #5d4037;
      }
      
      .el-dialog__headerbtn {
        .el-dialog__close {
          color: #606266;
          
          &:hover {
            color: #67C23A;
          }
        }
      }
    }
    
    .el-dialog__body {
      padding: 30px 20px;
      background: rgba(188, 152, 106, 0.05);
      
      .el-form-item {
        margin-bottom: 0;
        
        .search-input {
          /deep/ .el-input__inner {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(188, 152, 106, 0.4);
            color: #5d4037;
            
            &::placeholder {
              color: rgba(188, 152, 106, 0.6);
            }
            
            &:focus {
              border-color: #67C23A;
              background: rgba(255, 255, 255, 0.95);
            }
          }
          
          /deep/ .el-input__prefix {
            .el-input__icon {
              color: rgba(188, 152, 106, 0.6);
            }
          }
          
          /deep/ .el-input-group__append {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(188, 152, 106, 0.4);
            
            .el-button {
              color: #5d4037;
              
              &:hover, &:focus {
                background-color: #67C23A;
                border-color: #67C23A;
                color: #fff;
              }
              
              &.is-loading {
                background-color: #67C23A;
                border-color: #67C23A;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>